<template>
	<view>
		<!-- custompop -->
		<!-- :safeAreaInsetTop="height != ''" -->
		<u-popup :show.sync="pupshow" :safeAreaInsetBottom="false"
		 @close="closeClick" :round="20" mode="bottom">
		 <!--  -->
			<view class="SidebarPopBox">	
				<!-- 头部 -->
				<view class="popheader">
					<view class="ptitle FlexItem">
						{{ptitle}}
					</view>
					<view class="pclose u-flex" @click="closeClick">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				
				<!-- 内容 -->
				<view class="popContent">
					<scroll-view style="height: 100%;" scroll-y="true" enable-back-to-top="true" show-scrollbar="true">
						<template>
							<view class="item-box" v-for="(res,index) in list" :key="index" v-if="res.isModelShow">
								<view class="item-box-title u-flex-between">
									<view>{{res.title}}</view>
									<view style="font-weight: 400;">
										<view>{{res.selectEle ? res.selectEle : ''}}</view>
									</view>
								</view>
								<view class="item-box-btnbox">
									<view class="item-box-btn" v-for="(item, ind) in res.data" :key="ind" v-show="!res.isShowList ? ind < 9 : true">
										<!-- <u-tag :text="item.title" :name="ind" borderColor="#e5e5e5"></u-tag> -->
										<u-tag :text="item.title" :name="ind"
											:color="res.selectEle===item.title?tagColor:defaultColor"
											:bgColor="res.selectEle===item.title?tagBgColor:defaultBgColor"
											borderColor="#e5e5e5" 
											@click="radioClick(index,ind,item.title)">
										</u-tag>
									</view>
								</view>
								<view class="item-show" @click="showList(index)" v-if="res.data && res.data.length > 9">
									
									<u-icon v-if="!res.isShowList" name="arrow-down" size="30"></u-icon>
									<u-icon v-if="res.isShowList" name="arrow-up" size="30"></u-icon>
								</view>
							</view>
							<view class="item-box" v-if="isDate">
								<view class="item-box-title u-flex-between">
									<view>日期</view>
									<view class="item-content" >
										<picker mode="date" :value="date.startTime" @change="confirmDate($event,'startTime')" @cancel="confirmDate($event,'startTime')">
											<view class="uni-input">{{date.startTime == '' ? '起始日期' : date.startTime}}</view>
										</picker>
										<text style="margin: 0 20rpx;"> ~ </text>
										<picker mode="date" :value="date.endTime" @change="confirmDate($event,'endTime')" @cancel="confirmDate($event,'endTime')">
											<view class="uni-input">{{date.endTime == '' ? '结束日期' : date.endTime}}</view>
										</picker>
									</view>
								</view>
							</view>
						</template>
						<!-- 自定义内容模式 -->
						<template v-if="isSlot">
							<slot name="content"></slot>
						</template>
					</scroll-view>
				</view>
				<!-- 底部 -->
				<view class="FlexAlign CustomBottom">
					<view class="leftbtn " @click="clearSelect">
						重置
					</view>
					<view class="saveBtn FlexRow FlexItem" @click="saveSelect">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'sidebarpop',
		props: {
			// 标题
			ptitle: {
				type: String,
				default: '弹窗',
			},
			// 侧边栏数据
			sidebarList: {
				type: String,
				default: '',
			},
			isSlot: {
				type: Boolean,
				default: false,
			},
			height: {
				type: String,
				default: '',
			},
			isDate: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				pupshow: false,  		// 弹窗显示
				list: [],				// 侧边栏数据
				
				date: {
					startTime: '',
					endTime: '',
				},
				
				selectEleList: [], 		// 筛选项
				tagBgColor: '#fd7400',	// 标签选中背景色
				defaultBgColor: '#fff',	// 标签默认背景色
				tagColor: '#fff',		// 标签字体选中背景色
				defaultColor: 'grey',	// 标签字体默认背景色
				
				showDate: false,		// 日期弹窗
				startTime: '',			// 起始日期
				endTime: '',			// 结束日期
			}
		},
		watch: {
			sidebarList: {
				handler(newVal) {
					this.setListArr()
				},
				deep: true,
			},
		},
		methods: {
			// 处理数据
			setListArr(){ 
				let cur_str = this.sidebarList;
				if (cur_str && typeof(cur_str) == 'string') {
					let newArr = JSON.parse(cur_str) || []
					// newArr.forEach(() => this.selectEleList.push(' '))
					this.list = newArr;
					console.log('侧边栏数据----', this.list,'初始化筛选序列',this.selectEleList)
				}
			},
			// 选择标签
			radioClick(index,ind,title) {
				console.log(index,ind,title)
				// this.selectEleList[index] = title;
				const isRepeat = this.list[index].selectEle == title;
				this.list[index].selectEle = isRepeat ? '' : title;
				this.$emit('radioClick',this.list[index].data[ind],index,isRepeat)
			},
			// 展开列表项
			showList(index) {
				this.list[index].isShowList = !this.list[index].isShowList;
			},
			
			// 日期选择回调
			confirmDate(e,name) {
				console.log('日期选择回调----',e,name)
				this.date[name] = e.detail.value ? e.detail.value : '';
				this.$emit('confirmDate',this.date,this.list.length)
			},
			
			// 确认
			saveSelect() {
				this.headerClose();
				this.$emit('saveclick')
			},
			// 重置
			clearSelect() {
				this.list.forEach(res => {
					res.selectEle = ''
				})
				this.date.startTime = '';
				this.date.endTime = '';
				this.$emit('clearSelect')
			},
			// 取消、删除点击
			closeClick() {
				this.headerClose()
				this.$emit('closeclick')
			},
			// 关闭弹窗
			headerClose() {
				this.pupshow = false;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.SidebarPopBox {
		display: flex;
		flex-flow: column;
		width: 100vw;
		height: 80vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;
	}
	.popheader {
		display: flex;
		align-items: center;
		padding: 16rpx 20rpx;
		width: 100%;
		height: 6vh;
		z-index: 50;
		background: #fff;
	
		.pclose {
			width: 40rpx;
		}
	
		.ptitle {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
		}
	}
	
	.popContent {
		overflow: hidden;
		width: 100%;
		height: 70vh;
		padding: 20rpx;
		background: #f5f5f5;
		flex: 1;
		
		.item-box {
			padding: 20rpx;
			margin: 10rpx 10rpx 20rpx;
			border-radius: 10px;
			background: rgb(255,255,255);
		}
		.item-box-title {
			padding: 20rpx 10rpx 0;
			font-size: 26rpx;
			font-weight: 700;
		}
		.item-box-btnbox {
			// display: flex;
			// flex-wrap: wrap;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 20rpx;
			justify-items: start;
			padding: 20rpx 0;
			transition: all .5s;
			
			.item-box-btn {
				width: 200rpx;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// overflow: hidden;
			}
		}
		
		.item-content {
			display: flex;
			color: gray;
			font-weight: 400;
		}
		
		.item-show {
			display: flex;
			justify-content: center;
		}
	}
	
	.CustomBottom {
		width: 100%;
		height: 10vh;
		background: #fff;
		padding: 0 60rpx 0 60rpx;
		.leftbtn {
			min-width: 192rpx;
			font-size: 36rpx;
			color: #999;
			text-align: center;
		}
		.saveBtn {
			height: 90rpx;
			background: #fd7400;
			box-shadow: 0px 7px 40px rgba(253, 112, 8, 0.2);
			border-radius: 16rpx;
			font-size: 36rpx;
			min-width: 320rpx;
			color: #fff;
			text-align: center;
		}
	}
	
	/deep/text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/deep/.u-tag {
		padding: 0 10rpx;
	}
</style>